import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

const div = document.createElement('div') // 装载组件的dom容器
div.setAttribute('class', 'xtx-message-container') // 给容器加上标识
document.body.appendChild(div) // 把容器放在body上
let timer = null

export default ({ type, text }) => {
  // 把组件编译为dom节点
  const vnode = createVNode(XtxMessage, { type, text })// 对象传props
  // 把dom节点渲染到容器上
  render(vnode, div)
  // 定时销毁
  clearTimeout(timer) // 定时器使用前先销毁
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}
